<template>
  <div class="stats-bar-chart">
    <el-card>
      <div class="bar-chart-header">
        <span class="bar-chart-title">年度各区域修复成效对比</span>
        <el-select v-model="selectedYear" style="width:110px;margin-left:18px;">
          <el-option v-for="year in yearOptions" :key="year" :label="year" :value="year" />
        </el-select>
      </div>
      <div ref="barRef" class="bar-chart-content"></div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

// 业务模拟数据（不同年份、区域的成效）
const yearOptions = ['2022', '2023', '2024']
const dataMap: Record<string, { regions: string[]; values: number[] }> = {
  '2022': {
    regions: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区', 'G区', 'H区'],
    values: [78, 62, 53, 41, 55, 67, 40, 60]
  },
  '2023': {
    regions: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区', 'G区', 'H区'],
    values: [91, 80, 67, 58, 76, 83, 57, 82]
  },
  '2024': {
    regions: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区', 'G区', 'H区'],
    values: [98, 75, 58, 36, 82, 61, 45, 90]
  }
}

const selectedYear = ref('2024')
const barRef = ref<HTMLDivElement>()

function renderBarChart() {
  if (barRef.value) {
    const { regions, values } = dataMap[selectedYear.value]
    const chart = echarts.init(barRef.value)
    chart.setOption({
      tooltip: { trigger: 'axis' },
      grid: { left: 40, right: 24, top: 36, bottom: 36 },
      xAxis: {
        type: 'category',
        data: regions,
        axisTick: { alignWithLabel: true },
        axisLabel: { color: '#444', fontWeight: 'bold', fontSize: 15 }
      },
      yAxis: {
        type: 'value',
        name: '修复完成率(%)',
        max: 100,
        axisLabel: { color: '#888', fontSize: 13 }
      },
      series: [
        {
          name: '完成率',
          type: 'bar',
          data: values,
          barWidth: 36,
          itemStyle: {
            borderRadius: 10,
            color: (params: any) => {
              // 主区域突出色
              const colors = ['#67C23A', '#409EFF', '#E6A23C', '#13C2C2', '#F56C6C', '#C87F36', '#B37FEB', '#45B39D']
              return colors[params.dataIndex % colors.length]
            }
          },
          label: {
            show: true,
            position: 'top',
            color: '#308d2d',
            fontWeight: 'bold',
            fontSize: 15,
            formatter: '{c}%'
          }
        }
      ]
    })
    window.addEventListener('resize', () => chart.resize())
  }
}

onMounted(renderBarChart)
watch(selectedYear, renderBarChart)
</script>

<style scoped>
.stats-bar-chart {
  width: 100vw;
  min-height: 100vh;
  padding: 36px 0 0 0;
  background: linear-gradient(120deg,#f8fff7 60%,#e6f7ff 100%);
  overflow: auto;
}
.bar-chart-header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.bar-chart-title {
  font-size: 18px;
  font-weight: bold;
  color: #308d2d;
}
.bar-chart-content {
  width: 100%;
  min-height: 480px;
  height: 56vh;
}
</style>
